<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v3.2.8/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<style>
		.login-page {
			background-image: linear-gradient(180deg, #ffe8d4 0%, #a0fdba 100%);
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.login-title {
			font-size: 20px;
			margin-left: 90px;
		}

		.box-card {
			height: 500px;
			width: 410px;
			margin-left: 100px;
		}

		#codeCheck {
			width: 300px;
		}

		.code {
			font-family: Arial, 宋体;
			font-style: italic;
			color: green;
			border: 0;
			padding: 2px 3px;
			letter-spacing: 3px;
			font-weight: bolder;
		}

		#checkCode {
			margin-bottom: -10px;
			margin-left: 150px;
			width: 70px;
			height: 40px;
		}

		.el-link {
			margin-left: 100px;
		}
	</style>
	<body>
		<div id="app">
			<template>
				<div class="login-page">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<h2>欢迎登录</h2>
							<span class="login-title">Element后台管理系统</span>
						</div>
						<div class="login-form">
							<el-form :model="form" :rules="loginRules" ref="loginForm">
								<el-form-item prop="uname">
									<el-input clearable type="text" v-model="form.uname" auto-complete="off"
										placeholder="请输入用户名">
										<template slot="prepend"><i style="font-size:20px"
												class="el-icon-user"></i></template>
									</el-input>
								</el-form-item>
								<el-form-item prop="upwd">
									<el-input show-password clearable type="text" v-model="form.upwd"
										auto-complete="off" placeholder="请输入密码">
										<template slot="prepend"><i style="font-size:20px"
												class="el-icon-key"></i></template>
									</el-input>
								</el-form-item>
								<el-form-item prop="codeCheck">
									<!--验证码-->
									<el-input clearable type="text" v-model="form.codeCheck" id="codeCheck"
										placeholder="请输入验证码">
										<template slot="prepend"><i style="font-size:20px"
												class="el-icon-chat-dot-square"></i></template>
									</el-input>
									<input type="button" id="checkCode" class="code" style="width:60px"
										@click="createCode()">
								</el-form-item>
								<el-form-item>
									<el-link :underline="false" type="primary"
										href="regist.html">-----没有账号,去注册-----</el-link>
								</el-form-item>
								<el-form-item>
									<el-button style="width:100%;" type="primary" @click="handleLogin" :plain="true"
										:loading="loading">登录</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-card>
				</div>
			</template>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				loading: false,
				form: {
					uname: '',
					upwd: '',
					codeCheck: ''
				},
				loginRules: {
					uname: [{
						required: true,
						message: '请输入账户',
						trigger: 'blur'
					}],
					upwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					codeCheck: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				},
				code: ''
			},
			methods: {
				// 验证码
				createCode() {
					code = new Array();
					var codeLength = 4; //验证码的长度
					var checkCode = document.getElementById("checkCode");
					checkCode.value = "";
					var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j',
						'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
					for (var i = 0; i < codeLength; i++) {
						var charIndex = Math.floor(Math.random() * 32);
						code += selectChar[charIndex];
					}
					if (code.length != codeLength) {
						createCode();
					}
					checkCode.value = code;
				},
				handleLogin() {
					this.$refs.loginForm.validate().then(() => {
						var that = this;
						this.loading = true;
						//模拟异步请求后台接口 登录操作
						setTimeout(() => {
							let that = this;
							axios.post(API + "logins", this.form)
								.then(function(res) {
									//alert(JSON.stringify(res));
									console.log(res);
									if (res.data.code == 200) {
										if (that.form.codeCheck != code) {
											that.$message.error('验证码错误!');
											return;
										}
										// 代表登录成功,取出res中的 token
										let jwtToken = res.data.data.jwtToken;
										console.log(jwtToken);
										// 把 token存到 本地存储 setItem("",);
										window.localStorage.setItem("jwtToken", jwtToken);
										// 删掉 jwtToken
										//window.localStorage.removeItem("token",jwtToken);
										// 跳转页面
										window.location.href = "menu.html";
									} else {
										that.$message("登录出错了!")
									}
								}).catch(err => {
									console.log(err);
								});
							this.loading = false;
						}, 600)
					}).catch((error => {
						this.$message({
							message: '输入错误！',
							type: 'warning'
						});
					}))
				}
			},
			mounted() {
				this.createCode(); // 确保验证码在页面完全加载后生成
			}
		})
	</script>
</html>